<!--主页面的标签页（选项卡）-->
<template>
  <el-tabs v-model="editableTabsValue" type="card" closable @tab-click="clickTab" @tab-remove="removeTab">
    <el-tab-pane
      v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
    </el-tab-pane>
  </el-tabs>
</template>

<script>
    export default {
      name: "Tabs",
      data() {
        return {
        }
      },
      computed:{
        editableTabs:{  //所有标签页
          get(){
            return this.$store.state.menus.editableTabs
          },
          set(val){
            this.$store.state.menus.editableTabs=val
          }
        },
        editableTabsValue:{ //打开的标签页
          get(){
            return this.$store.state.menus.editableTabsValue
          },
          set(val){
            this.$store.state.menus.editableTabsValue=val
          }
        }
      },
      methods: {
        removeTab(targetName) {
          let tabs = this.editableTabs;
          let activeName = this.editableTabsValue;
          if(targetName==="Index"){ //首页不可删除
            this.$message({
              showClose: true,
              message: '首页不可关闭',
              type: 'warning'
            });
            return
          }
          if (activeName === targetName) {  //删除当前标签页跳转到相邻页
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.name;
                }
              }
            });
          }
          this.editableTabsValue = activeName;
          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
          this.$router.push({name:activeName})
        },
        clickTab(target){
          this.$router.push({name:target.name})
        }
      }
    }
</script>

<style scoped>

</style>
